<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>购物车页面</title>
	<link rel="stylesheet" href="../frontDesk/css/base.css" type="text/css" />
	<link rel="stylesheet" href="../frontDesk/css/shop_common.css" type="text/css" />
	<link rel="stylesheet" href="../frontDesk/css/shop_header.css" type="text/css" />
	<link rel="stylesheet" href="../frontDesk/css/shop_gouwuche.css" type="text/css" />
    <script type="text/javascript" src="../frontDesk/js/jquery.js" ></script>
    <script type="text/javascript" src="../frontDesk/js/topNav.js" ></script>
    <script type="text/javascript" src="../frontDesk/js/jquery.goodnums.js" ></script>
    <script type="text/javascript" src="../frontDesk/js/shop_gouwuche.js" ></script>

    <style type="text/css">
    .shop_bd_shdz_title{width:1000px; margin-top: 10px; height:50px; line-height: 50px; overflow: hidden; background-color:#F8F8F8;}
    .shop_bd_shdz_title h3{width:120px; text-align: center; height:40px; line-height: 40px; font-size: 14px; font-weight: bold;  background:#FFF; border:1px solid #E8E8E8; border-radius:4px 4px 0 0; float: left;  position: relative; top:10px; left:10px; border-bottom: none;}
    .shop_bd_shdz_title p{float: right;}
    .shop_bd_shdz_title p a{margin:0 8px; color:#555555;}

	.shop_bd_shdz_lists{width:1000px;}
	.shop_bd_shdz_lists ul{width:1000px;}
	.shop_bd_shdz_lists ul li{width:980px; border-radius: 3px; margin:5px 0; padding-left:18px; line-height: 40px; height:40px; border:1px solid #FFE580; background-color:#FFF5CC;}
	.shop_bd_shdz_lists ul li label{color:#626A73; font-weight: bold;}
	.shop_bd_shdz_lists ul li label span{padding:10px;}
	.shop_bd_shdz_lists ul li em{margin:0 4px; color:#626A73;}

	.shop_bd_shdz{width:1000px; margin:10px auto 0;}
	.shop_bd_shdz_new{border:1px solid #ccc; width:998px;}
	.shop_bd_shdz_new div.title{width:990px; padding-left:8px; line-height:35px; height:35px; border-bottom:1px solid #ccc; background-color:#F2F2F2; font-color:#656565; font-weight: bold; font-size:14px;}
	.shdz_new_form{width:980px; padding:9px;}
	.shdz_new_form ul{width:100%;}
	.shdz_new_form ul li{clear:both; width:100%; padding:5px 0; height:25px; line-height: 25px;}
	.shdz_new_form ul li label{float:left;width:100px; text-align: right; padding-right: 10px;}
	.shdz_new_form ul li label span{color:#f00; font-weight: bold; font-size:14px; position: relative; left:-3px; top:2px;}
    </style>

	<script type="text/javascript">
	jQuery(function(){
		jQuery("#new_add_shdz_btn").toggle(function(){
			jQuery("#new_add_shdz_contents").show(500);
		},function(){
			jQuery("#new_add_shdz_contents").hide(500);
		});
	});
	</script>
</head>
<body>
		<!-- Header  -wll-2013/03/24 -->
	<div class="shop_hd">
		<!-- Header TopNav -->
		<div class="shop_hd_topNav">
			<div class="shop_hd_topNav_all">
				<!-- Header TopNav Left -->
				<div class="shop_hd_topNav_all_left">
					<p>您好，欢迎来到<b><a href="/">ShoopNC商城</a></b>[<a href="">登录</a>][<a href="">注册</a>]</p>
				</div>
				<!-- Header TopNav Left End -->

				<!-- Header TopNav Right -->
				<div class="shop_hd_topNav_all_right">
					<ul class="topNav_quick_menu">

						<li>
							<div class="topNav_menu">
								<a href="#" class="topNavHover">我的商城<i></i></a>
								<div class="topNav_menu_bd" style="display:none;" >
						            <ul>
						              <li><a title="已买到的商品" target="_top" href="#">已买到的商品</a></li>
						              <li><a title="个人主页" target="_top" href="#">个人主页</a></li>
						              <li><a title="我的好友" target="_top" href="#">我的好友</a></li>
						            </ul>
						        </div>
							</div>
						</li>
                                                <li>
							<div class="topNav_menu">
								<a href="#" class="topNavHover">卖家中心<i></i></a>
								<div class="topNav_menu_bd" style="display:none;">
						            <ul>
						              <li><a title="已售出的商品" target="_top" href="#">已售出的商品</a></li>
						              <li><a title="销售中的商品" target="_top" href="#">销售中的商品</a></li>
						            </ul>
						        </div>
							</div>
						</li>

						<li>
							<div class="topNav_menu">
								<a href="#" class="topNavHover">购物车<b>0</b>种商品<i></i></a>
								<div class="topNav_menu_bd" style="display:none;">
									<!--
						            <ul>
						              <li><a title="已售出的商品" target="_top" href="#">已售出的商品</a></li>
						              <li><a title="销售中的商品" target="_top" href="#">销售中的商品</a></li>
						            </ul>
						        	-->
						            <p>还没有商品，赶快去挑选！</p>
						        </div>
							</div>
						</li>

						<li>
							<div class="topNav_menu">
								<a href="#" class="topNavHover">我的收藏<i></i></a>
								<div class="topNav_menu_bd" style="display:none;">
						            <ul>
						              <li><a title="收藏的商品" target="_top" href="#">收藏的商品</a></li>
						              <li><a title="收藏的店铺" target="_top" href="#">收藏的店铺</a></li>
						            </ul>
						        </div>
							</div>
						</li>

						<li>
							<div class="topNav_menu">
								<a href="#">站内消息</a>
							</div>
						</li>

					</ul>
				</div>
				<!-- Header TopNav Right End -->
			</div>
			<div class="clear"></div>
		</div>
		<div class="clear"></div>
		<!-- Header TopNav End -->

	</div>
	<div class="clear"></div>
	<!-- 面包屑 注意首页没有 -->
	<div class="shop_hd_breadcrumb">
		<strong>当前位置：</strong>
		<span>
			<a href="">首页</a>&nbsp;›&nbsp;
			<a href="">我的商城</a>&nbsp;›&nbsp;
			<a href="">我的购物车</a>
		</span>
	</div>
	<div class="clear"></div>
	<!-- 面包屑 End -->

	<!-- Header End -->
	
	<!-- 购物车 Body -->
	<div class="shop_gwc_bd clearfix">
		<div class="shop_gwc_bd_contents clearfix">

			<!-- 购物流程导航 -->
			<div class="shop_gwc_bd_contents_lc clearfix">
				<ul>
					<li class="step_a">确认购物清单</li>
					<li class="step_b hover_b">确认收货人资料及送货方式</li>
					<li class="step_c">购买完成</li>
				</ul>
			</div>
			<!-- 购物流程导航 End -->
			<div class="clear"></div>
			<!-- 收货地址 title -->
			<div class="shop_bd_shdz_title">
				<h3>收货人地址</h3>
				<p><a href="javasrcipt:void(0);" id="new_add_shdz_btn">新增收货地址</a></p>
			</div>
			<div class="clear"></div>
			<!-- 收货人地址 Title End -->
			<div class="shop_bd_shdz clearfix">
				<div class="shop_bd_shdz_lists clearfix">
					<ul id="addressList">
					</ul>
				</div>
				<!-- 新增收货地址 -->
				<div id="new_add_shdz_contents" style="display:none;" class="shop_bd_shdz_new clearfix">
					<div class="title">新增收货地址</div>
					<div class="shdz_new_form">
						<form id="add-address-form" method="post">
							<ul>
								<li><label for=""><span>*</span>收货人姓名：</label><input type="text" class="name" name="recipients" /></li>
								<li><label for=""><span>*</span>所在地址：</label>
									<select name="province" id="province">
									</select>
									<select name="city" id="city">
									</select>
									<select name="area" id="area">
									</select>
								</li>
								<li><label for=""><span>*</span>详细地址：</label><input type="text" name="address" class="xiangxi" /></li>
								<li><label for=""><span></span>手机号：</label><input type="text" name="phone" class="shouji" /></li>
								<li><label for="">&nbsp;</label><input type="button" onclick="addAddress()" value="增加收货地址" /></li>
							</ul>
						</form>
					</div>
				</div>
				<!-- 新增收货地址 End -->
			</div>
			<div class="clear"></div>
			<!-- 购物车列表 -->
			<div class="shop_bd_shdz_title">
				<h3>确认购物清单</h3>
			</div>
			<div class="clear"></div>
			<table>
				<thead>
					<tr>
						<th colspan="2"><span>商品</span></th>
						<th><span>单价(元)</span></th>
						<th><span>数量</span></th>
						<th><span>小计</span></th>
						<th><span>操作</span></th>
					</tr>
				</thead>
				<tbody id="cart-list">
				</tbody>
				<tfoot>
					<tr>
						<td colspan="6">
							<div class="gwc_foot_zongjia">商品总价(不含运费)<span>￥<strong id="good_zongjia">12750.00</strong></span></div>
							<div class="clear"></div>
							<div class="gwc_foot_links">
								<a href="/frontDesk/flow.html" class="go">返回上一步</a>
								<a href="javascript:void(0);" onclick="submitShippingAddress()" class="op">确认收货地址</a>
							</div>
						</td>
					</tr>
				</tfoot>
			</table>
			<!-- 购物车列表 End -->

		</div>
	</div>
	<!-- 购物车 Body End -->

	<!-- Footer - wll - 2013/3/24 -->
	<div class="clear"></div>
	<div class="shop_footer">
            <div class="shop_footer_link">
                <p>
                    <a href="">首页</a>|
                    <a href="">招聘英才</a>|
                    <a href="">广告合作</a>|
                    <a href="">关于ShopCZ</a>|
                    <a href="">关于我们</a>
                </p>
            </div>
            <div class="shop_footer_copy">
                <p>Copyright 2007-2013 ShopCZ Inc.,All rights reserved.<br />d by ShopCZ 2.4 </p>
            </div>
        </div>
	<!-- Footer End -->

</body>

<script type="text/javascript">
	// 页面就绪事件
	$(function(){
		var defaultOption = "<option value='0'>---- 请选择 ----</option>";

		// 为3个<select>添加默认选项
		$("#province").append(defaultOption);
		$("#city").append(defaultOption);
		$("#area").append(defaultOption);

		// 自动生成省级列表
		appendList(86,"province");

		// 为省级列表添加事件
		$("#province").change(function(){
			var value = this.value;
			// 清空市级列表
			$("#city").empty();
			$("#city").append(defaultOption);
			// 清空区级列表
			$("#area").empty();
			$("#area").append(defaultOption);
			if(value != 0){
				// 更新市级列表
				appendList(value,"city");
			}
		});

		// 为市级列表添加事件
		$("#city").change(function(){
			var value=this.value;
			// 清空区级列表
			$("#area").empty();
			$("#area").append(defaultOption);
			if(value != 0){
				// 更新市级列表
				appendList(value,"area");
			}
		});

		// 获取当前用户收货地址
		$.get("/address/address_page.shtml", function (json) {
			if (json.code == 200) {
				traversalAdd(json);
			}else{
				alert(json.message);
			}
		}, "json");

		// 购物车列表
		$.get("/cart/select_cart_all.shtml", function (json) {
			console.log(json);
			if(json.code == 200){
				// 有数据
				$("#cart-list").empty();
				var sumPrice = 0;
				// 遍历结果
				for(var i=0;i<json.data.length;i++){
					var tr = '<tr>' +
							'<td class="gwc_list_pic"><a href=""><img width="100px" height="100px" src="..'+json.data[i].product.imgUrl+'" /></a></td>' +
							'<td class="gwc_list_title"><a href="">'+json.data[i].product.description+'</a></td>' +
							'<td class="gwc_list_danjia"><span>￥<strong id="danjia_001">'+json.data[i].product.price+'</strong></span></td>' +
							'<td class="gwc_list_shuliang"><span><input type="text" readonly="readonly" value="'+json.data[i].pNumber+'" id="goods_001" class="good_nums" /></span></td>' +
							'<td class="gwc_list_xiaoji"><span>￥<strong id="xiaoji_001" class="good_xiaojis">'+json.data[i].price+'.00</strong></span></td>' +
							'<td class="gwc_list_caozuo"><a href="javascript:void(0);" onclick="deleteCart('+json.data[i].id+')" class="shop_good_delete">删除</a></td>' +
							'</tr>';
					$("#cart-list").append(tr);
					sumPrice = sumPrice + json.data[i].price;
				}
				$("#good_zongjia").text(sumPrice + ".00");

			}else{
				// 没有数据，将有数据部分隐藏
				alert("还没有商品");
			}
		}, "json");

	});

	// parent是父级编号，sid是select标签的id属性的值
	function appendList(parent,sid){
		// 发送ajax请求
		$.ajax({
			"url":"/district/",
			"data":"parent="+parent,
			"type":"get",
			"dataType":"json",
			"success":function(json) {
				console.log(json);
				// 获取列表的数组
				var list = json.data;
				// 遍历数组
				for(var i=0;i<list.length;i++){
					// 每一条记录生成一个option
					var option="<option value='"+list[i].code+"'>"+list[i].name+"</option>";
					// 将option添加到select内部
					$("#"+sid).append(option);
				}
			}
		});
	}

	// 渲染收货地址列表
	function traversalAdd(json) {
		// 清空列表
		$("#addressList").empty();
		for (var i = 0; i < json.data.length; i++) {
			var li = '<li><label><span><input type="radio" name="shdz" value="'+json.data[i].id+'" />' +
					'</span></label><em>'+json.data[i].district+'</em><em>'+json.data[i].address+'</em>' +
					'<em>'+json.data[i].recipients+'(收)</em><em>'+json.data[i].phone+'</em></li>';
			$("#addressList").append(li);
		}
	}

	// 添加收获地址
	function addAddress() {
		// 发送Ajax请求
		$.ajax({
			url: "/address/add_address.shtml",
			data: $("#add-address-form").serialize(),
			type: "post",
			dataType: "json",
			success: function (json) {
				console.log(json);
				if (json.code == 200) {
					// 添加成功，更新收货地址列表
					traversalAdd(json);
					location.reload();
				}else{
					alert(json.message);
				}
			}
		});
	}

	// 删除购物车数据
	function deleteCart(id) {
		$.post("/cart/del_cart_by_id.shtml", {id: id}, function (json) {
			if(json.code == 200){
				location.reload();
			}else{
				alert("删除失败，请稍后再试");
			}
		}, "json");
	}

	// 确认收货地址提交订单
	function submitShippingAddress() {
		var read=$('input:radio[name="shdz"]:checked').val();
		if(read==null){
			alert("还没有选择收货地址!");
			return false;
		}else{
			// 选择了收货地址，发起请求生成订单
			$.post("/order/add_batch_order.shtml", {addressId: read}, function (json) {
				if(json.code == 200){
					location.href = "/frontDesk/order-success.html";
				}else{
					alert("确认收货地址失败");
				}
			}, "json");
		}
	}



</script>

</html>